<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>SVG で鏡餅ハガキ</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            body {
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
            }
            
            .kagamimochi-hagaki {
                position: absolute;
                width: 500px;
                height: 740px;
                margin: auto;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                box-shadow: 2px 2px 8px 0px black;
                
                background-color: white;
            }
        </style>
        <!--[if IE]>
        <style>
            .msg {
                font-family: "標楷體", "@ＭＳ 明朝";
                writing-mode:tb-rl;
            }
        </style>
        <![endif]-->
    </head>
    <body>
        <h1>SVG で鏡餅ハガキ</h1>
        <div class="kagamimochi-hagaki">
            <svg width="500" height="740">
                <defs>
                    <g id="kagamimochi">
                        <ellipse cx="250" cy="230" rx="130" ry="60" fill="#ffc" stroke="black" />
                        <ellipse cx="250" cy="155" rx="90" ry="40" fill="#ffc" stroke="black" />
                        <ellipse cx="250" cy="110" rx="35" ry="30" fill="orange" stroke="black" />
                        <path d="M240,90 C265,100 250,100 265,70" fill="green" stroke="black" />
                        <rect fill="hsl(40, 60%, 60%)" stroke="black" x=150 y=300 width=200 height=160 />
                        <rect fill="hsl(40, 60%, 60%)" stroke="black" x=100 y=250 width=300 height=50 />
                        <circle fill="black" cx=250 cy=380 r=50 />
                        <polygon fill="white" stroke="black" points="130 250, 250 370, 370 250" />
                        <polygon fill="red"   points="150 250, 250 350, 350 250" />
                        <polygon fill="white" points="170 250, 250 330, 330 250" />
                    </g>
                </defs>
                <use xlink:href="#kagamimochi" y="200" />
                <text x="40" y="83" font-size="50" font-family='"Meiryo", Arial, Helvetica, sans-serif' font-style="italic" fill="yellow">Happy New Year!</text>
                <text x="35" y="80" font-size="50" font-family='"Meiryo", Arial, Helvetica, sans-serif' font-style="italic">Happy New Year!</text>
                <text x="220" y="140" font-size="20" font-family='"Meiryo", Arial, Helvetica, sans-serif' font-style="italic">コトヨロ♪ 2012/01/01</text>
            </svg>
        </div>
    </body>
    
</html>